<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getPublicDetail } from '@/api/PublicSupervisionDetail';

const route = useRoute();
const router = useRouter();

// 定义详情数据
const detailData = ref([
  { label: '公众监督反馈信息编号', value: '' },
  { label: '反馈者信息', value: [] },
  { label: '反馈者联系电话', value: '' },
  { label: '反馈信息所在地址', value: [] },
  { label: '反馈信息描述', value: '' },
  { label: '预估等级', value: [] },
  { label: '反馈日期时间', value: [] }
]);

// 获取路由参数中的 id


// // 模拟从后端获取详细数据的函数
// const fetchDetailData = async (id) => {
//   // 这里可以替换为实际的 API 请求
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve({
//         id: '38',
//         name: '欧阳锋',
//         gender: '男',
//         birthDate: '1980-11-13',
//         phone: '17345988896',
//         address: ['辽宁省', '大连市', '甘井子区凌风街乘风社区'],
//         description: '月黑风高，空气浑浊，难道是杀人夜？',
//         level: ['四级', '中度污染'],
//         date: '2022-10-27',
//         time: '16:29:26'
//       });
//     }, 1000);
//   });
// };

// 根据 id 获取详细数据并填充到表格中
onMounted(async () => {
  const id = localStorage.getItem('publicSupervisionId');
  console.log('这是id',id);
  const result = await getPublicDetail(id);
  detailData.value = [
    { label: '公众监督反馈信息编号', value: result.data.id },
    { label: '反馈者信息', value: [result.data.supervisorName, result.data.gender] },
    { label: '反馈者联系电话', value: result.data.phone },
    { label: '反馈信息所在地址', value: [result.data.gridProvince, result.data.gridCity,result.data.address] },
    { label: '反馈信息描述', value: result.data.description },
    { label: '预估等级', value: result.data.estimatedAqiLevel },
    { label: '反馈日期时间', value: result.data.feedbackTime }
  ];
});

// 返回上一页的函数
const goBack = () => {
  router.go(-1);
};
</script>

<template>
  <div class="detail-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>公众监督数据详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 返回按钮 -->
    <el-button type="primary" @click="goBack" style="float: right; margin-top: -30px;">返回</el-button>

    <!-- 表格展示详细信息 -->
    <el-table :data="detailData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="label" label="" width="250" align="center"></el-table-column>
      <el-table-column prop="value" label="" align="left">
        <template #default="scope">
          <div v-if="Array.isArray(scope.row.value)">
            <el-tag v-for="tag in scope.row.value" :key="tag" style="margin-right: 5px;">{{ tag }}</el-tag>
          </div>
          <div v-else>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<style scoped>
.detail-container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}
</style>